<template>
  <div class="detail ace">
    <Header_h class="Header_h" v-if="pc == 1"></Header_h>
    <Header class="Header" v-else/>
    <NavItem class="NavItem" :class="type !=1?'':'navitems'"/>
    <div class="Breadcrumbs" v-if='type!=1'>
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button" @click="$router.push(`${url}`)">
        <router-link :to='{path:`${url}`}'>返回</router-link>
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item v-if="path == '/patentDetails' " :to='{path:`/patent`}'>我的专利管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/compdetail' " :to='{path:`/competitor`}'>监控竞争对手</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/cutDetails' " :to='{path:`/cutting`}'>产学情报研</el-breadcrumb-item>
        <el-breadcrumb-item :to='{path:`${url}`}'>专利列表</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to='{path:`${url}`}'>{{name}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>专利详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main :class='type !=1?"main-top":"main-top"'>
      <el-row type="flex" justify="space-between" class="title_pns">
        <el-col :xl="24" class="tio" v-if="data">
          <span class="v_span">{{data.pns}}</span>
          <p class="v_span2">{{data.tio}}</p>
        </el-col>
        <el-col :push="2" class="icon-tog mb" :xs="10">
          <i @click="show = true" class="iconfont icon-toggle"></i>
        </el-col>
        <el-col class="d_btn pc" style="text-align: right;">
          <el-button @click="copy" :data-clipboard-text="record" id="express_info_right" icon="iconfont icon-fenxiang">
            分享该专利
          </el-button>
          <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()">下载专利文件</el-button>
        </el-col>
      </el-row>
      <el-tabs style="margin-top:20px;" v-model="activeIndex" @tab-click="handleClick">
        <el-tab-pane label="法律状态">
          <el-table
            :header-cell-style="{background:'#F3F8FE'}"
            :data="data.law_infos"
            border
            class="tabbleWidth">
            <el-table-column
              width="150"
              prop="time"
              label="日期"
            >
            </el-table-column>
            <el-table-column
              width="280"
              prop="status"
              label="法律状态"
            >
            </el-table-column>
            <el-table-column
              width="280"
              prop="info"
              label="法律状态信息">
              <!-- <template slot-scope="scope">
                <span>{{scope.row.law_infos.time}}</span>
                <span>{{scope.row.law_infos.status}}</span>
                <span>{{scope.row.law_infos.info}}</span>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="desc"
              label="附加信息">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="费用信息">
          <el-button v-if="!pay" class="infos mBton" type="primary" @click="open">查看费用信息</el-button>

          <p v-if="data.cost_type == '1' &&  pay " class="infos">应缴费信息</p>
          <el-table
            v-if="data.cost_type == '1' &&  pay"
            :data="pay.FeeShouldPay"
            border
            style="width:38%">
            <!--  <el-table-column
                prop="applicationNumber"
                label="专利号"
                width="180">
              </el-table-column> -->
            <el-table-column
              prop="feeName"
              label="费用种类"
              width="180">
            </el-table-column>
            <el-table-column
              prop="shouldPayPayment"
              label="应缴金额"
              width="180">
            </el-table-column>
            <el-table-column
              prop="shouldPayDate"
              label="缴费截止日">
            </el-table-column>
            <!--   <el-table-column
                 prop="shouldPayDate"
                 label="费用状态">
               </el-table-column> -->
          </el-table>
          <p v-if="data.cost_type == '1' &&  pay " class="infos">已缴费信息</p>
          <el-table
            v-if="data.cost_type == '1' &&  pay "
            :data="pay.FeeOriginal"
            border
            class="tabbleWidth">
            <!--  <el-table-column
                prop="applicationNumber"
                label="专利号"
                width="180">
              </el-table-column> -->
            <el-table-column
              prop="feeName"
              label="费用种类"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="已缴金额"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentDate"
              label="缴费日期">
            </el-table-column>
            <el-table-column
              prop="payerName"
              label="缴费人姓名">
            </el-table-column>
            <el-table-column
              prop="receiptNumber"
              label="收据号">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="复审无效">
          <div v-if="review" class="tab_box">
            <div class="tab_item">
              <!-- <div class="left_title">委内编号</div>
              <div class="content">暂无数据</div> -->
              <div class="left_title">主审员</div>
              <div class="content">{{review.rimec}}</div>
              <div class="left_title">决定号</div>
              <div class="content">{{review.ridn}}</div>
            </div>
            <div class="tab_item">

              <div class="left_title">参审员</div>
              <div class="content">{{review.riaec}}</div>
              <div class="left_title">合议组组长</div>
              <div class="content">{{review.rilec}}</div>
            </div>
            <div class="tab_item">
              <div class="left_title">决定日</div>
              <div class="content">{{review.ridd}}</div>
              <div class="left_title">请求人</div>
              <div class="content">{{review.claimer}}</div>

            </div>
            <!-- <div class="tab_item">
                <div class="left_title">法律依据</div>
                <div class="content">暂无数据</div>
            </div> -->
            <div class="tab_item">
              <div class="left_title">案由</div>
              <div class="content anyou" v-html="review.html">
              </div>
            </div>
          </div>
          <div class="infos mBton" v-else>暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="许可信息">
          <el-table
            v-if="permit"
            class="tabbleWidth"
            :header-cell-style="{background:'#F3F8FE'}"
            :data="permit"
            border
          >
            <el-table-column
              prop="apc"
              label="许可人"
            >
            </el-table-column>
            <el-table-column
              prop="trpc"
              label="被许可人"
            >
            </el-table-column>
            <!--                <el-table-column
                              width="280"
                              prop="info"
                              label="合同类型">
                            </el-table-column>
                            <el-table-column
                              prop="desc"
                              label="许可类型 ">
                            </el-table-column>
                            <el-table-column
                              prop="desc"
                              label="生效日 ">
                            </el-table-column> -->
          </el-table>
          <div class="infos mBton" v-else>暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="专利质押">
          <el-table
            v-if="patent"
            :header-cell-style="{background:'#F3F8FE'}"
            :data="patent"
            border
            class="tabbleWidth">
            <el-table-column
              width="200"
              prop="time"
              label="登记生效日"
            >
            </el-table-column>
            <el-table-column
              width="280"
              prop="time"
              label="登记号"
            >
            </el-table-column>
            <el-table-column
              prop="ppoc"
              label="质押人 ">
            </el-table-column>
            <el-table-column
              prop="pppc"
              label="质权人 ">
            </el-table-column>
            <el-table-column
              width="280"
              prop="status"
              label="备案阶段">
            </el-table-column>
          </el-table>
          <div v-else class="infos mBton">暂无数据</div>
        </el-tab-pane>
      </el-tabs>
      <!-- <p class="infos">法律发文信息</p> -->
    </el-main>
    <Service class='service' v-if='this.$route.meta.serve && type!=1'/>
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权力要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin:0 10px;">
            <el-button @click="copy" id="express_info_right" :data-clipboard-text="record" type="warning">分享该专利
            </el-button>
            <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()" type="primary">下载专利文件</el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <rightMenu @moveTo="moveTo"/>
    <QRCode v-if="QRCodeVisible"  :text="record"  :desc="data"  :dialogVisible="QRCodeVisible"  @val="val"  />
  </div>
</template>

<script>
  import {detail} from "@/api"
  import Header from "@/components/Header";
  import Header_h from "@/components/Header_h";
  import Breadcrumb from '@/components/Breadcrumb'
  import NavItem from '@/components/Navitem'
  import rightMenu from "@/components/web/rightMenu";
  import QRCode from '@/components/QRCode'
  import {setShare} from "@/wechat";
  import {VUE_APP_BASE_API, PAGE_BASE_URL} from "@/config"
  import Service from '@/components/Service'
  import 'element-ui/lib/theme-chalk/base.css';

  export default {
    components: {
      Header_h,
      Header,
      Breadcrumb,
      NavItem,
      Service,

      QRCode,
      rightMenu

    },
    data() {
      return {
        QRCodeVisible: false,
        data: [],
        isShow: false,
        url: '',
        name: '',
        pay: [],
        activeIndex: 0,
        patent: [],
        permit: [],
        review: [],
        path: '',
        show: false,
        // record: `${PAGE_BASE_URL}/#/detail?pid=${sessionStorage.getItem("pid")}&pc=${sessionStorage.getItem("pc")}`,
        record: '',
        type: sessionStorage.getItem("type"),
        pc: sessionStorage.getItem("pc"),

      }
    },
    computed: {
      tabName() {
        return this.$route.query.tab || "law";
      },
    },
    async activated() {
      let initTabIndex = '0';
      switch (this.tabName) {
        case "law":
          initTabIndex = '0';
          break;
        case "cost":
          initTabIndex = '1';
          break;
        case "review":
          initTabIndex = '2';
          break;
        case "permit":
          initTabIndex = '3';
          break;
        case "patent":
          initTabIndex = '4';
          break;
        default:
          break;
      }
      this.activeIndex = initTabIndex;

      try {
        this.url = sessionStorage.getItem("url")
        this.name = sessionStorage.getItem("name")
        const pid = sessionStorage.getItem("pid")

        let pc
        if (this.$store.getters.token) {
          pc = 0
        } else {
          pc = 1
        }
        this.record = PAGE_BASE_URL + '#/detail?pid=' + (this.pid ? this.pid : sessionStorage.getItem('pid')) + '&type=1&pc=' + pc

        this.data = await detail({pid: pid, type: 7})
        this.path = sessionStorage.getItem("path")
        this.pay = this.data.law

        const desc = `政务走访管理系统`;
        const title = `[顺企中心]${this.data.tio}-${this.data.ano}`;
        setTimeout(() => {
          setShare({
            title, // 分享标题
            desc,
          });
        }, 1000);

        if (this.activeIndex == 4) {
          const res = await detail({
            type: 9,
            pid: pid
          })
          this.patent = res.list
        } else if (this.activeIndex == 3) {
          const permit = await detail({
            type: 10,
            pid: pid
          })
          this.permit = permit.list
        } else if (this.activeIndex == 2) {
          this.review = await detail({
            type: 11,
            pid: pid
          })
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    mounted() {

    },
    methods: {
      moveTo() {
        window.scrollTo(0, 0);
      },
      val(val) {
        this.QRCodeVisible = val
      },
      contactus(val) {
        this.dialogVisible = val
      },
      async open() {
        try {
          this.url = sessionStorage.getItem("url")
          this.name = sessionStorage.getItem("name")
          const pid = sessionStorage.getItem("pid")
          this.pay = await detail({pid: pid, type: 8})
          this.$alert(this.pay.msg, {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '我已知道',
            center: true,
            lockScroll: true
          }).then(() => {
            // this.isShow = true
          })
        } catch (e) {
          // this.$message.error(e.message)
        }
      },
      async dow() {
        try {
          const pid = sessionStorage.getItem("pid")
          // const res = await download(pid)
          // console.log(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`)
          window.open(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`)
        } catch (e) {
          this.$message(e.message);
        }
      },
      async handleClick(tab) {
        try {
          if (tab.index == 4) {
            const patent = await detail({
              type: 9,
              pid: sessionStorage.getItem("pid")
            })
            this.patent = patent.list
          } else if (tab.index == 3) {
            const permit = await detail({
              type: 10,
              pid: sessionStorage.getItem("pid")
            })
            this.permit = permit.list
          } else if (tab.index == 2) {
            this.review = await detail({
              type: 11,
              pid: sessionStorage.getItem("pid")
            })

          }

        } catch (e) {
          // this.$message.error(e.message)
        }

        let name = "law";
        switch (tab.index) {
          case '0':
            name = "law";
            break;
          case '1':
            name = "cost";
            break;
          case '2':
            name = "review";
            break;
          case '3':
            name = "permit";
            break;
          case '4':
            name = "patent";
            break;
          default:
            break;
        }
        this.$router.replace({name: "connection-list", query: {tab: name}});
      },
      copy() {
        this.show = false
        let clipboard = new this.clipboard("#express_info_right");
        let that = this
        clipboard.on('success', function () {

          that.QRCodeVisible = true
          clipboard.destroy();
        });
        clipboard.on('error', function () {
          that.$message.error('复制失败');
        });
      }
    }
  }
</script>


<style lang="less" scoped>
  .main-top {
    margin-top: 0;
  }

  .navitems {
    top: 0 !important;
  }

  .detail_large {
    margin-bottom: 44px;
  }

  .CN {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
    display: inline-block;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: inline-block;
    margin-left: 20px;
  }

  .detail_info {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }

  .detail_info_title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    margin: 20px 0;
  }

  .detail_info_last {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    margin: 20px 64px;
  }

  .img-box {
    width: 188px;
    // height:237px;
    border: 1px solid rgba(230, 233, 240, 1);
    border-radius: 5px;
    text-align: center;

    .img {
      width: 133px;
      height: 193px;
      object-fit: cover;
      margin: 10px 0;
    }
  }

  .detail_info_first_box {
    display: flex;
    align-items: center;
    // margin-bottom: 60px;
  }

  .tips {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: block;
    margin: 10px 0;
  }

  .detail_head_title {
    width: 143px;
  }

  .detail_info_patent {
    // height:50px;
    // margin:0 0 22px 0;
    margin-bottom: 20px;
    margin-left: 64px;
    width: 480px;
  }

  .detail_head_context {
    width: 143px;
    margin-bottom: 20px;
  }

  .v_span {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
  }

  .v_span2 {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    padding-left: 20px;
  }

  .infos {
    margin: 40px 0 20px 0;
  }

  .mBton {
    display: block;
    margin: 200px auto 20px;
    text-align: center;
  }

  .tab_box {
    text-align: center;
  }

  .tab_item {
    display: flex;

    .left_title {
      width: 151px;
      // height:60px;
      // line-height:60px;
      padding: 20px 0;
      display: block;
      background: #F7F9FC;
      border: 1px solid #E6E9F0;
      font-size: 14px;
      font-weight: 400;
      color: #1F2E4D;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      width: 425px;
      // height: 60px;
      // line-height:60px;
      background: #FFFFFF;
      border: 1px solid #E6E9F0;
      font-size: 14px;
      font-weight: 400;
      color: #1F2E4D;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .anyou {
      width: 1001px;
      padding: 30px;
      overflow: hidden;

      /deep/ div, p {
        width: 100%;
        margin: 10px 0;
      }
    }
  }

  .pc {
    display: block;
  }

  .mb {
    display: none;
  }

  .tabbleWidth {
    width: 70%;
  }

  @media (max-width: 750px) {
    .Breadcrumbs, .NavItem, .Header, .service {
      display: none;
    }

    .tabbleWidth {
      width: 100%;
      margin-top: 20px;
    }

    .main-top {
      width: 100%;
      margin-left: 0 !important;
      padding-bottom: 0;
      top: 0;
    }

    .pc {
      display: none;
    }

    .mb {
      display: block;
    }

    .detail_info_title {
      margin: 15px 0;
    }

    .detail_info_last {
      margin: 15px 0;
    }

    .infos {
      margin: 10px 0 0 0;
    }

    .detail_info {
      margin-bottom: 30px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      width: 100%;
    }

    .detail_info_first_box {
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
    }

    .detail_head_title {
      width: auto;
    }

    .img-box {
      width: 100%;
    }

    .abst__layout-row {
      flex-direction: column;
    }

    .mb_top {
      margin-top: 20px;
    }

    .mb_context {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .v_span2 {
      padding-left: 0;
    }

    .tio {
      line-height: 1.3;
    }

    .icon-tog {
      text-align: center;
      display: inline-block;
      line-height: 46px;
    }

    .icon-toggle {
      font-size: 25px !important;
    }

    .title_pns {
      border-bottom: 1px solid #C8D0DC;
      padding-bottom: 10px;
    }

    .transition-box {
      position: fixed;
      right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: 9;
      background-color: rgba(0, 0, 0, .3);
    }

    .el-zoom-in-top {
      position: fixed;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background-color: #fff;
      top: 0;
      right: 0;
      z-index: 10;
    }

    .mb_nav_li {
      margin: 60px auto 0;
    }

    .mb_nav_li li {
      // margin-top:20px;
      padding: 20px 15px;
      border-bottom: 1px solid #ddd;
    }

    .close {
      float: right;
      // padding: 10px;
      margin-top: 25px;
      margin-right: 25px;

      .iconfont {
        font-size: 22px;
      }
    }

    .mt_btn {
      margin-top: 30px !important;
    }

    .tab_item {
      display: block;

      .left_title {
        width: 100%;
        // height:60px;
        // line-height:60px;
        padding: 20px 0;
        display: block;
        background: #F7F9FC;
        border: 1px solid #E6E9F0;
        font-size: 14px;
        font-weight: 400;
        color: #1F2E4D;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .content {
        width: 100%;
        // height: 60px;
        // line-height:60px;
        background: #FFFFFF;
        border: 1px solid #E6E9F0;
        font-size: 14px;
        font-weight: 400;
        color: #1F2E4D;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;

      }

      .anyou {
        width: 100%;
        padding: 30px;
        overflow: hidden;

        /deep/ div, p {
          width: 100%;
          margin: 10px 0;
        }
      }
    }
  }


</style>
